<template>
    <div>
  <Loading v-if="loading"></Loading>
  <div id="main" v-if="!loading">
    <el-page-header @back="goBack" content="详情页面">
    </el-page-header>
    <div style="width: 100%;height: 400px;margin-top: 50px">
      <div id="big" style="float: left;width: 500px;">
        <p><span class="smallTitle">企业名称</span>:{{details.companyName}}</p>
        <p><span class="smallTitle">企业地址</span>:{{details.address}}</p>
        <p><span class="smallTitle">企业邮箱</span>:{{details.email}}</p>
        <p><span class="smallTitle">法人代表</span>:{{details.legalPerson}}</p>
        <p><span class="smallTitle">注册时间</span>:{{getTime(details.legalRegTime)}}</p>
<!--        <p>:</p>-->
      </div>
      <div style="float: left">
        <br>
        <span class="smallTitle">证明材料:</span>
        <div id="pic">
          <div  style="height: 100%;float: left;margin-right: 10px;margin-bottom: 10px" :key="key" v-for="(value,key) in src">
            <img class="img" :src="'data:image/png;base64,'+value" alt />
          </div>
        </div>

      </div>
    </div>


    <el-button @click="fail()" style="top: 35%;left: 70.5%" class="btn" type="danger" round>拒绝申请</el-button>
    <el-button @click="success()" class="btn" type="success" round>通过审核</el-button>
  </div>
    </div>
</template>

<script>
import { getAppDetails, appFail, appSuccess } from "../../network/admin";
import Loading from "../../components/common/Loading"
export default {
  name: "Details",
  components:{
    Loading
  },
  data() {
    return {
      src: "",
      details: "",
      loading:true
    };
  },
  methods: {
    getTime(time){
      let dt=new Date(time)
      return (
          dt.getFullYear() +
          "-" +
          (dt.getMonth() + 1) +
          "-" +
          dt.getDate()
      );
    },
    fail() {
      appFail(this.details.cid, "company",).then(
        res => {
          console.log(res);
          if(res.data.code==100){
            this.$message.success("已拒绝该申请~")
            this.$router.go(-1)
          }
        }
      );
    },
    success() {
      appSuccess(this.details.cid, "company",).then(
        res => {
          console.log(res);
          this.$message.success("已通过该申请~~")
          this.$router.go(-1)
        }
      );
    },
    goBack() {
      this.$router.go(-1)
    }
  },
  created() {
    getAppDetails('company', this.$route.params.id)
      .then(res => {
        console.log(res);
        this.loading=false
        this.src = res.data.extend.map;
        this.details = res.data.extend.company;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style scoped>
#main {
  width: 80%;
  margin: 0 auto;
  text-align: left;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.img {
  cursor: pointer;
  float: left;
  height: 100%;
  transition: all 0.3s;
}

p {
  line-height: 1.7;
}
.btn {

}

.smallTitle{
  font-size: large;
  font-weight: bolder;
}
#pic{
  overflow: auto;
  box-sizing: border-box;
  padding: 10px;
  width: 460px;
  height: 180px;
  border: 1px deepskyblue dotted;
}
</style>